import $ from 'jquery';
import bs from 'bootstrap';
import React from 'react';

/**
 * 通用头部
 */
class HeaderView extends React.Component {

    constructor(props) {
        super(props);
        this.logout = this.logout.bind(this);
    }

    /**
     * 点击退出
     */
    logout() {
        alert('logout');
        return false;
    }

    /**
     * 渲染界面
     */
    render() {
        return (
            <div className="navbar-container" id="navbar-container">
                <div className="navbar-header pull-left">
                    <a href="javascript:void(0)" className="navbar-brand">
                        <small>
                            <i className="icon-leaf"></i>
                            萨摩耶
                        </small>
                    </a>
                </div>
                <div className="navbar-header pull-right" role="navigation">
                    <ul className="nav ace-nav">
                        <li className="light-blue">
                            <a data-toggle="dropdown" href="#" className="dropdown-toggle">
                                <img className="nav-user-photo" src="assets/images/user.jpg" alt="Jason's Photo" />
                                <span className="user-info">
                                    <small>欢迎, </small>
                                </span>
                                <i className="icon-caret-down"></i>
                            </a>
                            <ul className="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                                <li>
                                    <a onClick={this.logout}><i className="icon-off"></i>退出</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        );
    }
}

module.exports = HeaderView;